<template>
  <div class="book-detail">
    <div v-if="loading" class="loading">
      加载中...
    </div>
    <div v-else-if="error" class="error">
      {{ error }}
    </div>
    <div v-else class="content">
      <div class="book-info">
        <div class="cover">
          <img :src="book.cover" :alt="book.title">
        </div>
        <div class="info">
          <h1>{{ book.title }}</h1>
          <div class="meta">
            <p>作者：{{ book.author }}</p>
            <p>分类：{{ book.category }}</p>
            <p>价格：¥{{ book.price }}</p>
            <p>发布时间：{{ book.publishTime }}</p>
          </div>
          <div class="actions">
            <button 
              class="primary-btn"
              @click="handleRead"
              :disabled="loading"
            >
              开始阅读
            </button>
            <button 
              class="outline-btn"
              @click="handleAddToShelf"
              :disabled="loading"
            >
              加入书架
            </button>
          </div>
        </div>
      </div>
      
      <div class="description">
        <h2>内容简介</h2>
        <p>{{ book.description }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/store'
import { bookApi } from '@/api/apis/book'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const book = ref({})
const loading = ref(false)
const error = ref('')

// 获取书籍详情
const fetchBookDetail = async () => {
  const id = route.params.id
  if (!id) return
  
  loading.value = true
  error.value = ''
  
  try {
    const res = await bookApi.getBookDetail(id)
    console.log(res)
    if (res.code === 200) {
      book.value = res.data
    } else {
      error.value = res.message
    }
  } catch (err) {
    error.value = '获取数据失败，请稍后重试'
    console.error('获取书籍详情失败:', err)
  } finally {
    loading.value = false
  }
}

// 开始阅读
const handleRead = () => {
  if (!userStore.isLoggedIn) {
    router.push({
      path: '/login',
      query: { redirect: route.fullPath }
    })
    return
  }
  // TODO: 跳转到阅读页面
  router.push(`/reader/${book.value.id}`)
}

// 加入书架
const handleAddToShelf = async () => {
  if (!userStore.isLoggedIn) {
    router.push({
      path: '/login',
      query: { redirect: route.fullPath }
    })
    return
  }
  // TODO: 调用加入书架接口
}

onMounted(() => {
  fetchBookDetail()
})
</script>

<style scoped lang="scss">
.book-detail {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;

  .loading,
  .error {
    text-align: center;
    padding: 40px;
    color: #666;
  }

  .content {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }

  .book-info {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;

    .cover {
      flex: 0 0 300px;
      
      img {
        width: 100%;
        height: 400px;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
    }

    .info {
      flex: 1;

      h1 {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .meta {
        p {
          margin: 10px 0;
          color: #666;
        }
      }

      .actions {
        margin-top: 30px;
        display: flex;
        gap: 15px;

        button {
          padding: 10px 24px;
          border-radius: 4px;
          cursor: pointer;
          font-size: 16px;
          border: none;
          
          &:disabled {
            opacity: 0.6;
            cursor: not-allowed;
          }
        }

        .primary-btn {
          background: #42b983;
          color: #fff;
          
          &:hover:not(:disabled) {
            background: #3aa876;
          }
        }

        .outline-btn {
          background: #fff;
          border: 1px solid #42b983;
          color: #42b983;
          
          &:hover:not(:disabled) {
            background: #f0f9f6;
          }
        }
      }
    }
  }

  .description {
    h2 {
      font-size: 18px;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
    }

    p {
      line-height: 1.8;
      color: #666;
    }
  }
}
</style>